<template>
  <div class="permission-management">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>权限管理</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="角色管理" name="roles">
            <div class="toolbar">
              <el-button type="primary" @click="handleCreateRole">新增角色</el-button>
            </div>
            <el-table :data="roles" style="width: 100%">
              <el-table-column prop="name" label="角色名称" width="200" />
              <el-table-column prop="description" label="描述" />
              <el-table-column prop="userCount" label="用户数" width="100" />
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button link type="primary" @click="handleEditRole(scope.row)">编辑</el-button>
                  <el-button link type="success" @click="handlePermissionConfig(scope.row)">权限配置</el-button>
                  <el-button link type="danger" @click="handleDeleteRole(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="权限配置" name="permissions">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>功能模块</span>
                    </div>
                  </template>
                  <div class="module-tree">
                    <el-tree
                      :data="modules"
                      show-checkbox
                      node-key="id"
                      :default-expanded-keys="['dashboard', 'tenant']"
                      :default-checked-keys="defaultCheckedKeys"
                      :props="defaultProps"
                    />
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="16">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>权限详情</span>
                    </div>
                  </template>
                  <div class="permission-details">
                    <el-table :data="permissions" style="width: 100%">
                      <el-table-column prop="module" label="模块" width="150" />
                      <el-table-column prop="action" label="操作" width="120" />
                      <el-table-column prop="description" label="描述" />
                      <el-table-column label="权限状态" width="120">
                        <template #default="scope">
                          <el-switch
                            v-model="scope.row.enabled"
                            active-text="启用"
                            inactive-text="禁用"
                          />
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="访问控制" name="accessControl">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>IP访问控制</span>
                    </div>
                  </template>
                  <div class="ip-control">
                    <div class="toolbar">
                      <el-button type="primary" @click="handleAddIP">添加IP</el-button>
                    </div>
                    <el-table :data="ipWhitelist" style="width: 100%">
                      <el-table-column prop="ip" label="IP地址" width="150" />
                      <el-table-column prop="description" label="描述" />
                      <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                          <el-tag :type="scope.row.status ? 'success' : 'info'">
                            {{ scope.row.status ? '启用' : '禁用' }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150">
                        <template #default="scope">
                          <el-button link type="primary" @click="handleEditIP(scope.row)">编辑</el-button>
                          <el-button link type="danger" @click="handleDeleteIP(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="12">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>时间访问控制</span>
                    </div>
                  </template>
                  <div class="time-control">
                    <div class="toolbar">
                      <el-button type="primary" @click="handleAddTimeRule">添加规则</el-button>
                    </div>
                    <el-table :data="timeRules" style="width: 100%">
                      <el-table-column prop="role" label="角色" width="120" />
                      <el-table-column prop="timeRange" label="时间范围" />
                      <el-table-column label="状态" width="100">
                        <template #default="scope">
                          <el-switch
                            v-model="scope.row.enabled"
                            active-text="启用"
                            inactive-text="禁用"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150">
                        <template #default="scope">
                          <el-button link type="primary" @click="handleEditTimeRule(scope.row)">编辑</el-button>
                          <el-button link type="danger" @click="handleDeleteTimeRule(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('roles')

// 角色数据
const roles = ref([
  { id: 1, name: '超级管理员', description: '拥有所有权限', userCount: 1 },
  { id: 2, name: '运营经理', description: '负责租户管理和运营分析', userCount: 3 },
  { id: 3, name: '客服专员', description: '负责工单管理和客户支持', userCount: 5 },
  { id: 4, name: '运维工程师', description: '负责系统运维和监控', userCount: 2 },
  { id: 5, name: '财务专员', description: '负责平台财务管理', userCount: 2 }
])

// 模块树数据
const modules = ref([
  {
    id: 'dashboard',
    label: '平台概览',
    children: [
      { id: 'system-monitor', label: '系统监控大屏' },
      { id: 'operation-data', label: '运营数据看板' },
      { id: 'service-status', label: '服务状态监控' }
    ]
  },
  {
    id: 'tenant',
    label: '租户管理',
    children: [
      { id: 'organization', label: '组织管理' },
      { id: 'user', label: '用户管理' },
      { id: 'package', label: '套餐管理' },
      { id: 'billing', label: '租户账单' }
    ]
  },
  {
    id: 'finance',
    label: '财务管理',
    children: [
      { id: 'income', label: '平台收入管理' },
      { id: 'cost', label: '费用配置' },
      { id: 'report', label: '财务报表' }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

const defaultCheckedKeys = ref(['system-monitor', 'operation-data', 'organization', 'user'])

// 权限数据
const permissions = ref([
  { module: '平台概览', action: '查看', description: '查看平台概览数据', enabled: true },
  { module: '租户管理', action: '创建', description: '创建新的租户组织', enabled: true },
  { module: '租户管理', action: '编辑', description: '编辑租户组织信息', enabled: true },
  { module: '租户管理', action: '删除', description: '删除租户组织', enabled: false },
  { module: '财务管理', action: '查看', description: '查看财务数据', enabled: true }
])

// IP白名单
const ipWhitelist = ref([
  { ip: '192.168.1.100', description: '运营部办公室', status: true },
  { ip: '192.168.1.101', description: '财务部办公室', status: true },
  { ip: '203.156.89.45', description: '远程办公IP', status: false }
])

// 时间访问规则
const timeRules = ref([
  { role: '客服专员', timeRange: '09:00-18:00', enabled: true },
  { role: '运维工程师', timeRange: '00:00-24:00', enabled: true },
  { role: '财务专员', timeRange: '08:30-17:30', enabled: true }
])

// 方法
const handleCreateRole = () => {
  console.log('新增角色')
}

const handleEditRole = (row: any) => {
  console.log('编辑角色', row)
}

const handlePermissionConfig = (row: any) => {
  console.log('权限配置', row)
}

const handleDeleteRole = (row: any) => {
  console.log('删除角色', row)
}

const handleAddIP = () => {
  console.log('添加IP')
}

const handleEditIP = (row: any) => {
  console.log('编辑IP', row)
}

const handleDeleteIP = (row: any) => {
  console.log('删除IP', row)
}

const handleAddTimeRule = () => {
  console.log('添加时间规则')
}

const handleEditTimeRule = (row: any) => {
  console.log('编辑时间规则', row)
}

const handleDeleteTimeRule = (row: any) => {
  console.log('删除时间规则', row)
}
</script>

<style scoped>
.permission-management {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.toolbar {
  margin-bottom: 20px;
}

.toolbar .el-button {
  margin-right: 10px;
}

.module-tree {
  padding: 20px 0;
}

.permission-details {
  padding: 20px 0;
}

.ip-control,
.time-control {
  padding: 20px 0;
}
</style>